<template>
  <div class="mypage">
    <div class="header">头部导航栏</div>
    <div class="main">
      <div class="main-container">
        <div class="main-left">左侧</div>
        <div class="main-right">
          右侧
          <p>we</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.mypage {
  z-index: 10;
  position: sticky;
  height: 100%;
  width: 100%;
  background-color: green;
}
.header {
  height: 64px;
  min-width: 800px;
  background-color: #929b6e;
}
.main {
  position: absolute;
  width: 100%;
  min-width: 800px;
  top: 64px;
  bottom: 0;
  overflow: hidden;
  background-color: #a1b5bd;
}
.main-container{
  display: flex;
  margin: 16px auto;
  /* padding: 0 16px; */
  justify-content: space-evenly;
  
}
.main-left {  
  flex: 1;
  height: 672px;
  margin: 0 8px 0 16px;
  background-color: green;
}

.main-right {
  flex: 1;
  height: 672px;
  margin: 0 16px 0 8px;
  background-color: red;
}
</style>